<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
	<head>
		<title>重庆理工</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>  
        <style>
            .fade-enter-active, .fade-leave-active {
                transition: opacity 2s            
            }
            .fade-enter, .fade-leave-to {
                opacity:0
            }
        </style>
	</head>
	<body>
		<div id="myVue">
			<p>--------单项绑定-----------</p>
			<h4>{{title}}</h4>
			<p v-html="htmlString"></p>
			<p>
				<label>用户ID:</label>
				<input type="text" :value="'userId_'+user.id" />
			</p>
			<p>
				<label>用户名:</label>
				<input type="text" :value="user.userName" />
			</p>
			<p>
				<label>密码:</label>
				<input type="password" :value="user.password" />
			</p>
			<p :style="{color:color}">用户名:{{user.userName | filter1 | filter2}}</p>
			<p :style="style">用户名:{{user.userName}}</p>
            <p>年龄:{{user.age}}</p>


            <p>--------双向绑定-----------</p>
            <p>
				<label>用户名:</label>
				<input type="text" v-model.trim="user.userName" />
			</p>
			<p>
				<label>密码:</label>
				<input type="password" v-model="user.password" />
			</p>
            <p>
				<label>年龄:</label>
				<input type="text" v-model.number="user.age" />
			</p>


            <p>--------计算器-----------</p>
            <p><span>{{capitalize}}</span></p>


            <p>--------监听器-----------</p>
            <p>
                <label>title</label>
                <input type="text" v-model="title"/>
            </p>
            <p>
				<label>用户名:</label>
				<input type="text" v-model="user.userName" />
			</p>
            <p>
                <span style="color:red">{{error}}</span>
            </p>


            <p>--------事件绑定-----------</p>
            <p>
                <button @click="user.age += 1">按钮1</button>
                <button @click="test1()">按钮2</button>
                <button @click="test2('hanzhengyan',$event)" 
                    name="but2" value="111111" myData="hanzhengyan">按钮3</button>
                
            </p>

            <p>--------动画过度-----------</p>
            <button @click="show = !show">按钮4</button>
            <transition name="fade">
                <p v-show="show">动画效果</p>
            </transition>
            
			<p>--------条件渲染-----------</p>
			<p>
				<span v-if="user.age > 18">成年人</span>
				<span v-else>儿童</span>
			</p>
			<p>
				<span v-show="show">我是一个人</span>
			</p>


            <p>--------循环渲染-----------</p>
            <p>
                <ul>
                    <li v-for="item in roles" :key="item.id">{{item.roleName}}</li>
                </ul>
            </p>
             <p>
                <ul>
                    <li v-for="(item,index) in roles" 
                        :key="item.id">{{index}}_{{item.roleName}}</li>
                </ul>
            </p>
            <p>
                <select>
                    <option v-for="(item,index) in roles" :key="item.id" 
                        :value="item.id">{{item.roleName}}</option>
                </select>
            </p>
            <p>
                <table>
                    <tr><td>ID</td><td>RoleName</td></tr>
                    <tr v-for="(item,index) in roles" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.userName}}</td>
                    </tr>
                </table>
            </p>
            
		</div>
		<script>
            $(function(){
                test4();
            });

            Vue.filter("filter2",function(value){
                if(!value){
                            return "";
                        }
                        return value.replace("h","__");
            });
			var myVue = new Vue({
				el: "#myVue",
				data: {
					title: "This is vue test page",
					htmlString: "<span style='color:red;'>自己</span>",
					color: "blue",
                    error: "",
					style: { color: "yellow" },
					show: true,
					user: {
						id: 1,
						userName: "hanzhengyan",
						age: 21,
						password: "11111",
						gender: "male",
					},
					roles: [
						{ id: 1, roleName: "admin" },
						{ id: 2, roleName: "manager" },
						{ id: 3, roleName: "staff" },
					],
				},
				methods: {
                    test1:function(){
                        console.log("This is test1 function.");
                    },
                    test2:function(name,event){
                        console.log(name);
                        if(event){
                            var btn = event.currentTarget;
                            console.log(btn.attributes.getNamedItem("myData"));
                            // 标签自带属性
                            console.log(btn.name);
                            console.log(btn.value);

                            // 自定义属性取法
                            console.log(btn.attributes.getNamedItem("myData").name);
                            console.log(btn.attributes.getNamedItem("myData").value);
                            var myData = btn.attributes.getNamedItem("myData").name;
                            var myDataValue = btn.attributes.getNamedItem("myData").value;
                        }
                    },

                    test3:function(){
                        console.log("挂载生命周期方法1");
                    },
                    test4:function(){
                        console.log("挂载生命周期方法2");
                    },
                    getUserById:function(){
                        var self = this;
                        $.ajax({
                            url:"http://www.sfac.xyz/api/user/1",
                            type:"get",
                            success:function(rs){
                                self.user = rs;
                            },
                            error:function(rs){
                                console.log(rs);
                            }
                        })
                    }

                },

                watch:{
                    title(newValue,oldValue){
                        this.error = newValue.length > 6 ? "title太长了" : ""
                    },

                    'user.userName'(newValue,oldValue){
                        this.error = newValue.length > 6 ? "用户名太长了" : ""
                    },
                },
                computed: {
                    capitalize:function(){
                        return this.user.userName[0].toUpperCase() + this.user.userName.substr(1);
                    }
                },
                filters: {
                    filter1:function(value){
                        if(!value){
                            return "";
                        }
                        return value.replace("a","_");
                    }
                },
                created () {
                    // 通过created生命周期，将vue实例定义的test4方法赋值给window test4
                    window.test4 = this.test4;
                },
                mounted () {
                    this.test3();
                    this.getUserById();
                }
			});
		</script>
	</body>
</html>
